<template>
	<view class="popup" v-if="show">
		<view class="popup_bg" @click="show = false"></view>
		<view class="popup_body">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	defineProps({
		data: Array
	})
	let show = ref(false)
	const open = () => {
		show.value = true;
	}
	const close = () => {
		show.value = false;
	}

	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	@keyframes up {
		from {
			transform: translate3d(0, 100%, 0);
			opacity: .3
		}

		to {
			transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}

	.popup {

		&_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .2);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		&_body {
			background: #fff;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 9999;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, .05);
			overflow: hidden;
			padding-bottom: 30rpx;
			height: auto;
			animation: up .5s both;

		}
	}
</style>